<template>
	<view class="bg">
		<view class="task_one">
			<view class="task_left_top">
				<view class="task_round">
					<image src="../../../static/images/common/task.png" mode=""></image>
				</view>
				<view class="name">{{dataObj.title}}</view>
			</view>
			<view class="task_content">
				<view class="task_child" v-for="(item,index) in dataObj.list">
					<view class="task_test">
						<view class="task_left">文件名称</view>
						<view class="task_right childFont">{{item.smallNode}}</view>
					</view>
					<view class="task_test">
						<view class="task_left">责任单位</view>
						<view class="task_right childFont">{{item.resDept}}</view>
					</view>
					<view class="task_test">
						<view class="task_left">备注</view>
						<view class="task_right childFont">{{item.remark ? item.remark :'暂无备注'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {}
			}
		},
		onLoad(option) {
			this.dataObj = JSON.parse(option.item)
		},

	}
</script>

<style lang="scss" scoped>
	.task_one {
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: relative;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 24rpx 8rpx 8rpx 8rpx;

		.line {
			width: 1rpx;
			height: calc(100% - 48rpx);
			// background-color: pink;
			position: absolute;
			left: 44rpx;
			top: 24rpx;
			border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
			// z-index: 5;
		}
	}

	.task_left_top {
		position: absolute;
		top: 0;
		left: 0;
		// min-width: 200rpx;
		height: 48rpx;
		background: rgba(48, 116, 255, 0.2);
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		.name {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3074ff;
			padding: 0 30rpx 0 20rpx;
		}

		.task_round {
			width: 48rpx;
			height: 48rpx;
			background: #3074ff;
			z-index: 5;
			box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.task_content {
		width: 100%;
		margin-top: 40rpx;

		.task_btnArr {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 40rpx;
		}

		.task_btn {
			background: #3074ff;
			border-radius: 4rpx;
			padding: 8rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.more {
				width: 24rpx;
				height: 6rpx;
				margin-right: 10rpx;
			}

			.font {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
			}
		}

		.btn_color1 {
			background-color: rgba(231, 233, 240, 1);
		}

		.btn_color2 {
			background-color: rgba(248, 95, 120, 1);
		}

		.task_name {
			display: flex;
			padding-bottom: 40rpx;
		}

		.task_child {
			padding: 20rpx 0;
			border-top: 1rpx solid rgba(231, 233, 240, 1);
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
		}

		.task_test {
			display: flex;
			align-items: flex-start;
			margin: 20rpx 0;
		}

		.task_left {
			flex: 2.5;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.task_left3 {
			flex: 3.2;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.nameFont {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
		}

		.childFont {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #272b32;
		}

		.childFontGrey {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(205, 211, 224, 1);
		}

		.task_right {
			flex: 7;
			display: flex;
			align-items: center;



			.zt_type1 {
				margin-left: 10rpx;
				background: #f85f78;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.zt_type2 {
				margin-left: 10rpx;
				background: rgba(250, 173, 51, 1);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
